<template>
    <div>
        <vue-tinymce v-model="content" :setting="setting" />
    </div>
</template>

<script>
export default {
    name: 'ElementTestList',

    data() {
        return {
            content:"",
            // 编辑器设置
            setting: {
                menubar: false,
                toolbar:
                    "fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
                // toolbar_drawer: "sliding",
                quickbars_selection_toolbar:
                    "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                plugins: "link image media table lists fullscreen",
                language: "zh_CN",
                font_formats:
                    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
                height: 750,
                elementpath: false, //去除下面的标签
                statusbar: false, //去除版权
                convert_urls: false, // 设为false解决问题 TinyMCE会自动判断是否可以将当前图片路径变为相对路径。带有域名的路径也会被转换为相对路径。
                images_upload_handler: function (blobInfo, success, failure) {
                    let formdata = new FormData();
                    formdata.append("file", blobInfo.blob());
                    console.log(formdata)
                    // 走图片上传后台
                    // request.http("fileUpload", formdata).then((res) => {
                    //     if (res.status == "0000") {
                    //         let url = _that.G_imgUrl + `${res.fileId}`;
                    //         success(url);
                    //     }
                    // });
                },
                //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发
                file_picker_callback: function (callback, value, meta) {
                    // 主要判断filetype 类型：file，image， media
                    if (meta.filetype === "media") {
                        // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。
                        let input = document.createElement("input"); //创建一个隐藏的input
                        input.setAttribute("type", "file");
                        input.setAttribute("accept", ".mp4");
                        input.onchange = function () {
                            let file = this.files[0];
                            let formdata = new FormData();
                            formdata.append("file", file);
                            // 执行上传文件方法，通过服务器返回上传成功的地址
                            request.http("fileUpload", formdata).then((res) => {
                                if (res.status == "0000") {
                                    // callback(res.url); //回调的作用是将所选择的视频的url显示在输入框中
                                    let url = _that.G_imgUrl + `${res.fileId}`;
                                    callback(url);
                                }
                            });
                        };
                        //触发点击
                        input.click();
                    }
                },
            },
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped></style>